<template>
    <vc-viewer @ready="onViewerReady">
        <vc-primitive ref="primitive" :appearance="appearance" :geometryInstances="geometryInstances">
            <vc-geometry-instance>
                <vc-geometry-circle ref="geometryRef" :center="[103, 32]" :radius="250000"></vc-geometry-circle>
            </vc-geometry-instance>
        </vc-primitive>
        <!-- 注记层 -->
        <vc-layer-imagery :sort-order="20">
            <vc-imagery-provider-tianditu map-style="cva_c" :token="tandituToken"></vc-imagery-provider-tianditu>
        </vc-layer-imagery>
        <vc-layer-imagery :sort-order="10">
            <vc-imagery-provider-tianditu :map-style="mapStyle" :token="tandituToken" ref="provider"></vc-imagery-provider-tianditu>
        </vc-layer-imagery>
    </vc-viewer>
</template>
<script lang="ts" setup>
    import { ref } from 'vue'
    const tandituToken = ref('436ce7e50d27eede2f2929307e6b33c0')
    const mapStyle = ref('img_c')
    const geometryInstances = ref({})
    const appearance = ref({})
    const onViewerReady = ({ Cesium, viewer })=> {
        const rectangle = { west: 105.5, south: 29.5, east: 115.5, north: 35.5 }
        geometryInstances.value = new Cesium.GeometryInstance({
          geometry: new Cesium.RectangleGeometry({
            rectangle: Cesium.Rectangle.fromDegrees(rectangle.west, rectangle.south, rectangle.east, rectangle.north)
          })
        })
        appearance.value = new Cesium.MaterialAppearance({
          material: Cesium.Material.fromType('Checkerboard', {
            repeat: new Cesium.Cartesian2(20.0, 6.0)
          }),
          materialSupport: Cesium.MaterialAppearance.MaterialSupport.TEXTURED
        })
      }
</script>